import React, { useEffect } from "react";
import Footer from "../components/Footer";
import Header from "../components/Header";

export default function News() {
  // 生命周期方法 => 组件挂载时
  useEffect(() => {
    // console.log 后面的分号不能省略
    console.log("新闻列表组件挂载完成");
    // 使用fetch异步请求服务器端接口
    (async () => {
      let url = "https://www.codeboy.com/mfresh/data/news_select.php";
      let res = await fetch(url);
      // console.log(res);
      /*
      // 响应消息主体数据不是一个JSON字符串或JS对象,而是一个 数据读取流 (类似于水龙头)
      // res.body.on('data',()=>{})
      // res.body.on('end',()=>{})
      // let data = JSON.parse(...)
      */
      //上述过程可以使用一个方法进行简化
      let data = await res.json(); //不断的读取响应消息主体数据,直到读完;然后再调用JSON.pares()解析这些数据
      console.log(data);
    })();
  }, []);
  return (
    <>
      {/* F1:页头 */}
      <Header></Header>
      <h1>新闻列表</h1>
      {/* F4:页脚 */}
      <Footer></Footer>
    </>
  );
}
